<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>

<body>

	<!-- 
接受一个函数，然后返回一个新函数，并且这个新函数始终保持了特定的上下文语境。
		关于$.proxy(function,context);传入两个参数function,以及上下文环境
主要就是改变function中this 的指向；因为js中function中this总指向调用者，所以this经常会改变，要想this指向不变
就通过$.proxy(function,obj),这样function中this会始终指向obj;


	 -->
    <p>
        <button type="button" id="test">Test</button>
    </p>
    <div id="log"></div>
    <script type="text/javascript">
    var me = {
        type: "zombie",
        test: function(event) {
            var element = event.target;
            $(element).css("background-color", "red");
            $("#log").append("Hello " + this.type + "<br>");
            // $("#test").unbind("click", this.test);
        }
    };

    var you = {
        type: "person",
        test: function(event) {
            $("#log").append(this.type + " ");
        }
    };
    var youClick = $.proxy( you.test, you );
    $("#test")

        /* this === "zombie"; handler unbound after first click */
        // .on("click", me.test)

        /* this === "person" */
        // .on("click", youClick)

        /* this === "zombie" */
        // .on("click", $.proxy(you.test, me))

        /* this === "<button> element" */
        .on("click", you.test);
    </script>
</body>

</html>